
<template>
  <div id="app" v-bind:style="appDivStyle">
    <div class="context" ref="context">
      <div class="queryBox" ref="queryBox">
        <el-form :model="formQueryCondition" ref="form" size="mini">
          <!--查询条件-->
          <el-row>
            <el-col span="5">
              <!-- 演员编号 -->
              <el-form-item :label="$t('Actor.queryLabel.code')" :label-width="queryformLabelWidth">
                <el-input
                  v-model.trim="formQueryCondition.actorCode.val"
                  class="queryItemStyle"
                  clearable
                  :placeholder="$t('Actor.queryLabel.placeholderCode')"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col span="5" :offset="1">
              <!-- 演员姓名 -->
              <el-form-item :label="$t('Actor.queryLabel.name')" :label-width="queryformLabelWidth">
                <el-input
                  v-model.trim="formQueryCondition.actorName.val"
                  class="queryItemStyle"
                  clearable
                  :placeholder="$t('Actor.queryLabel.placeholderName')"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col span="5" :offset="1">
              <!-- 姓名简拼 -->
              <el-form-item :label="$t('Actor.queryLabel.pName')" :label-width="queryformLabelWidth">
                <el-input
                  v-model.trim="formQueryCondition.actorPy.val"
                  class="queryItemStyle"
                  clearable
                  :placeholder="$t('Actor.queryLabel.placeholderPName')"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col span="5" :offset="1">
              <!-- 演员别名 -->
              <el-form-item :label="$t('Actor.queryLabel.byName')" :label-width="queryformLabelWidth">
                <el-input
                  v-model.trim="formQueryCondition.actorAlName.val"
                  class="queryItemStyle"
                  clearable
                  :placeholder="$t('Actor.queryLabel.placeholderByName')"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col span="5">
              <!-- 性别 -->
              <el-form-item :label="$t('actorQueryLabel.role.sex')" :label-width="queryformLabelWidth">
                <el-select
                  v-model="formQueryCondition.sex.val"
                  class="queryItemStyle"
                  placeholder="请选择"
                >
                  <el-option :label="$t('label.all')" value></el-option>
                  <el-option :value="drug.valueCode" :key="drug.valueCode" :label="drug.valueText"
                                    v-for="drug in gender"></el-option>
                  <!-- <el-option :label="$t('label.man')" value="Man"></el-option>
                  <el-option :label="$t('label.women')" value="Women"></el-option> -->
                </el-select>
              </el-form-item>
            </el-col>
            <el-col span="5" :offset="1">
              <!-- 英文名 -->
              <el-form-item :label="$t('Actor.queryLabel.enName')" :label-width="queryformLabelWidth">
                <el-input
                  v-model.trim="formQueryCondition.actorEnName.val"
                  class="queryItemStyle"
                  clearable
                  :placeholder="$t('Actor.queryLabel.placeholderEnName')"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col span="5" :offset="1">
              <!-- 审核状态 -->
              <el-form-item
                :label="$t('Actor.queryLabel.approvalStatus')"
                :label-width="queryformLabelWidth"
              >
                <el-select
                  v-model="formQueryCondition.approvalStatus.val"
                  class="queryItemStyle"
                >
                  <el-option :label="$t('label.all')" value></el-option>
                <el-option :value="drug.valueCode" :key="drug.valueCode" :label="drug.valueText"
                                    v-for="drug in ApprovalStatus"></el-option>
                </el-select>
                <!-- 状态 -->
                <!-- <el-form-item :label="$t('AssetsProviderManage.queryLabel.status')"  :label-width="queryformLabelWidth">
                    <el-select v-model="formQueryCondition.isEnable.val" class="queryItemStyle" >
                        <el-option :label="$t('label.all')" value=""></el-option>
                        <el-option :label="$t('label.available')" value="Available"></el-option>
                        <el-option :label="$t('label.invalid')" value="Invalid"></el-option>
                    </el-select>
                </el-form-item> -->
              </el-form-item>
            </el-col>
          </el-row>
          <!--事件按钮-->
          <el-row>
            <el-col span="24">
              <div style="text-align:right">
                <!--返回-->
                <el-form-item v-if="isNeedGoBack">
                  <el-button type="primary" @click="back" icon="el-icon-back">{{ $t('Actor.btnText.backBtnText') }}</el-button>
                <!-- </el-form-item> -->
                <!-- <el-form-item> -->
                  <el-button v-permission="{menuCode: menuCode,resourceCode: 'resetActorBtnText'}" type="primary" @click="onReset('form')">{{ $t('btnText.resetBtnText') }}</el-button>
                <!-- </el-form-item> -->
                <!-- <el-form-item> -->
                  <el-button v-permission="{menuCode: menuCode,resourceCode: 'queryActorBtnText'}" type="primary" @click="onQuery('queryActorBtnText')" icon="el-icon-search" :loading="loading" >{{ $t('btnText.queryBtnText') }}</el-button>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="dataBox" ref="dataBox">
        <!--数据表格-->
        <transition enter-active-class="animated zoomIn" leave-active-class="animated rotateOut">
          <el-table
            v-if="isInit"
            ref="singleTable"
            :data="tableData"
            :height="tableHeight"
            @sort-change="sortChange"
            v-loading="loading"
            size="mini"
            style="width: 100%;"
            stripe="stripe"
            border="border"
          >
          <el-table-column
              type="index"
              width="50"
              fixed="left"
              :label="$t('actorTable.xh')"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="actorCode"
              min-width="120"
              :label="$t('Actor.table.code')"
              sortable="custom"
              sort-by="mediaActor.actorCode"
            ></el-table-column>
            <el-table-column
              prop="actorName"
              min-width="110"
              :label="$t('Actor.table.name')"
              sortable="custom"
              sort-by="mediaActor.actorName"
            ></el-table-column>
            <el-table-column
              prop="actorPy"
              min-width="130"
              :label="$t('Actor.table.pName')"
              sortable="custom"
              sort-by="mediaActor.actorPy"
            ></el-table-column>
            <el-table-column
              prop="actorAlName"
              min-width="130"
              :label="$t('Actor.table.byName')"
              sortable="custom"
              sort-by="mediaActor.actorAlName"
            ></el-table-column>
            <el-table-column
              prop="approvalStatusName"
              min-width="130"
              :label="$t('Actor.table.approvalStatus')"
              sortable="custom"
              sort-by="mediaActor.approvalStatus"
            ></el-table-column>
            <el-table-column
              prop="sex"
              min-width="110"
              :label="$t('Actor.table.sex')"
              sortable="custom"
              sort-by="mediaActor.sex"
            ></el-table-column>
            <el-table-column
              prop="actorEnName"
              min-width="110"
              :label="$t('Actor.table.enName')"
              sortable="custom"
              sort-by="mediaActor.actorEnName"
            ></el-table-column>
             <el-table-column
              prop="profession"
              min-width="110"
              label="职业"
              sortable="custom"
              sort-by="profession"
            ></el-table-column>
          </el-table>
        </transition>
      </div>
    </div>
    <div class="pageBox">
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentPageChange"
        :current-page="pager.curPage"
        :page-sizes="pager.sizes"
        :page-size="pager.curSize"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pager.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import comBaseVue from "../../baseViewModel";

export default {
  mixins: [comBaseVue],
  name: "Actor",
  props: {
    isNeedGoBack: Boolean,
    curRootAssets: String,
    menuCode: String
  },
  data() {
    return {
      imageUrl: '',
      // 是否正在提交中
      loading: false,
      //真正的实体类名称
      modelName: "com.ispr.iptv.entity.media.AssetAndActor",
      // 是否正在提交中
      loading: false,
      isInit: false,
      isNonEditable: false,
      tableData: [],
      gender: [],
      ApprovalStatus: [],
      isShowAuditForm: false,
      //编辑布局
      //标题
      titleSpan: 24,
      labelSpan: 3,
      dataSpan: 9,
      appDivStyle: {
        height: this.$store.getters.appHeight
      },
      // 查询条件
      formQueryCondition: {
        assetId: {
          key: "assetId",
          op: "=", // 操作符
          val: this.curRootAssets// 查询的值
        },
        actorCode: {
          key: "mediaActor.actorCode",
          op: "LIKE", // 操作符
          val: "" // 查询的值
        },
        actorName: {
          key: "mediaActor.actorName",
          op: "LIKE", // 操作符
          val: "" // 查询的值
        },
        actorPy: {
          key: "mediaActor.actorPy",
          op: "LIKE", // 操作符
          val: "" // 查询的值
        },
        actorAlName: {
          key: "mediaActor.actorAlName",
          op: "LIKE", // 操作符
          val: "" // 查询的值
        },
        sex: {
          key: "mediaActor.sex",
          op: "=", // 操作符
          val: "" // 查询的值
        },
        actorEnName: {
          key: "mediaActor.actorEnName",
          op: "LIKE", // 操作符
          val: "" // 查询的值
        },
        isEnable: {
                key: 'isEnable',
                op: '=', // 操作符
                val: 'Available'
            },
        approvalStatus: {
                key: 'mediaActor.approvalStatus',
                op: '=', // 操作符
                val: ''
            },
      }

    };
  },
  methods: {

    // 重置
    onReset: function() {
      if (this.$refs["form"]) {
        this.$refs["form"].resetFields();
      }
      this.formQueryCondition.actorCode.val = "";
      this.formQueryCondition.actorName.val = "";
      this.formQueryCondition.actorPy.val = "";
      this.formQueryCondition.actorAlName.val = "";
      this.formQueryCondition.sex.val = "";
      this.formQueryCondition.actorEnName.val = "";
      this.formQueryCondition.approvalStatus.val = "";

    },

    // // 查询网格数据
    // queryTable: function() {
    //   this.loading = true;
    //   this.queryModel(
    //     this.modelName,
    //     "Query",
    //     this.formQueryCondition,
    //     this.pager,
    //     this.sort,
    //     this.setTableData
    //   );
    // },


      //回退事件
    back: function(isSuccess, json) {
        //this.$router.go(-1);//后退
        this.$parent.setCurrentComponent("goBack", null);
      },
      // 为性别下拉框赋值
    findGender: function() {
        this.findByTypeCode("10003",this.setGender)
    },
    // 查询性别下拉框数据成功后的回调
    setGender: function(isSuccess,json) {
        try{
            if (isSuccess) {
                this.gender = [];
                for (var i = 0; i < json.data.length; i++) {
                    this.gender.push(json.data[i]);
                }
            }
            else {
                this.$message.error(json.msg);
            }
        }
        catch(e){
            alert(e);
        }
    },
        // 为资产状态下拉框赋值
    findApprovalStatus: function() {
        this.findByTypeCode("10007",this.setApprovalStatus)
    },
    // 查询资产状态下拉框数据成功后的回调
    setApprovalStatus: function(isSuccess,json) {
        try{
            if (isSuccess) {
                this.ApprovalStatus = [];
                for (var i = 0; i < json.data.length; i++) {
                    this.ApprovalStatus.push(json.data[i]);
                }
            }
            else {
                this.$message.error(json.msg);
            }
        }
        catch(e){
            alert(e);
        }
    },
    initTable:function(){
          this.tableHeight = this.$refs.context.offsetHeight - this.$refs.queryBox.offsetHeight;
          this.isInit = true;
      },
    enterDown(){
     if(!this.loading){
        this.onQuery()
      }
    }




  },
  computed: {
      dDataSpan:function(){
          return 24 - this.labelSpan;
      }
  },
  mounted: function mounted() {
      this.findGender();
      this.findApprovalStatus();
      //this.formQueryCondition.approvalStatus.val = "PendingReview";
      this.onQuery();
      window.setTimeout(this.initTable,100);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main {
  height: 100%;
  width: 100%;
  font-size: 14px;
  color: #333333;
  font-family: "Microsoft YaHei";
}
.datarow {
  border: 1px solid #eeeeee;
  padding: 0px 0px 0px 0px;
  margin-bottom: 0px;
  &:last-child {
    margin-bottom: 0;
  }
}

.titlecol {
  font-weight: bold;
}

.labcol {
  padding: 3px 3px 3px 5px;
  border-radius: 4px;
  font-size: 14px;
  text-align: right;
  border-right: 1px solid #eeeeee;
}

.datacol {
  padding: 3px 3px 3px 3px;
  border-radius: 0px;
  text-align: left;

  vertical-align: middle;
  border-right: 1px solid #eeeeee;
}

.bgrow {
  background-color: #d4f1ff;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }


</style>

